<template>
    <template v-if="tableData.length">
        <el-card-collapse
            shadow="always" class="cardBox" :is-collapse="isTableShow"
            :card-body-dom="'elCardBody' + refIndex" :button-dom="'button' + refIndex"
            :svg-arrow-dom="'svgArrow' + refIndex" :icon-dom="'iconDom' + refIndex"
        >
            <template #header>
                <div class="cardBox-header flexC-FS-C" @click="handleChangeCollapse">
                    <div class="w100 flexR-SB-C">
                        <div class="flexR-FS-C">
                            <div class="anime-div flexR-FS-C">
                                <button :id="'button' + refIndex" class="collapse-button">
                                    <svg
                                        :id="'svgArrow' + refIndex" xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-chevron-up"
                                    >
                                        <polyline points="18 15 12 9 6 15" />
                                    </svg>
                                </button>
                                <el-image :id="'iconDom' + refIndex" class="image" :src="imgIcon" fit="cover" />
                            </div>
                            <span>{{ title }}</span>
                        </div>
                        <el-image v-if="detailData.isEditable" class="icon" :src="addImg" fit="fill" @click.stop="handleAddContract({}, '1')" />
                    </div>
                    <div v-if="tableData.length" class="w100 flexR-SB-C">
                        <div class="total mt10">动态立项合计：<count-to-number class="color1" :number="dtlxTotal" /></div>
                    </div>
                </div>
            </template>

            <template v-for="(item, index) in tableData" :key="index">
                <p class="jiange" />
                <div class="card-item">
                    <el-row class="rowBox">
                        <el-col :span="24">
                            <el-row :gutter="10">
                                <el-col class="title-span" :span="7">合同名称</el-col>
                                <el-col class="value-span" :span="16">{{ item.lxmc }}</el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24" class="mt15">
                            <el-row :gutter="10">
                                <el-col class="title-span" :span="7">主要工程量</el-col>
                                <el-col class="value-span" :span="16">{{ item.zygcl }}</el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24" class="mt15">
                            <el-row :gutter="10">
                                <el-col class="title-span" :span="7">初始立项/暂估合同价</el-col>
                                <el-col class="value-span" :span="16">
                                    <span class="color1">{{ item.zghtjwy
                                    }}</span>()
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24" class="mt15">
                            <el-row :gutter="10">
                                <el-col class="title-span" :span="7">动态立项金额（）</el-col>
                                <el-col class="value-span" :span="16">
                                    <span class="color1">{{ item.dtjewy
                                    }}</span>()
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24" class="mt15">
                            <el-row :gutter="10">
                                <el-col class="title-span" :span="7">资质要求</el-col>
                                <el-col class="value-span" :span="16">{{ item.zzyq }}</el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24" class="mt15">
                            <el-row :gutter="10">
                                <el-col class="title-span" :span="7">工作范围</el-col>
                                <el-col class="value-span" :span="16">{{ item.gzfwjnr }}</el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24" class="mt15">
                            <el-row :gutter="10">
                                <el-col class="title-span" :span="7">采购形式</el-col>
                                <el-col
                                    class="value-span fw600" :span="16"
                                    :style="{ color: statusColor[item.status] }"
                                >
                                    {{ cgxsOptions[item.cgxs] }}
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24" class="mt15">
                            <el-row :gutter="10">
                                <el-col class="title-span" :span="7">计划签订日期</el-col>
                                <el-col class="value-span" :span="16">{{ formatDate(item.jhqdrq).fmt1 }}</el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24" class="mt15">
                            <el-row :gutter="10">
                                <el-col class="title-span" :span="7">合同状态</el-col>
                                <el-col class="value-span" :span="16">
                                    <span type="primary">{{ lxStatusOptions[item.lxStatus] }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24" class="mt15">
                            <el-row :gutter="10">
                                <el-col class="title-span" :span="7">签订事由</el-col>
                                <el-col class="value-span" :span="16">{{ item.lxsysm }}</el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <div class="w100 flexR-SB-C">
                        <template v-if="detailData.isEditable">
                            <el-button class="button button2" @click="handleAddContract(item, '2')">补充</el-button>
                            <el-button class="button button3" @click="handleAddContract(item, '4')">
                                {{ item.lxStatus !==
                                    9 ? '删除' : '销项' }}
                            </el-button>
                        </template>
                        <template v-else>
                            <el-button v-if="item.lxStatus == 9" class="button button2">
                                {{ item.lxlx == 5 ||
                                    item.lxlx == 6 ? '发起备案' : '发起选用' }}
                            </el-button>
                            <el-button class="button button3" @click="handleAddContract(item, '5')">查看</el-button>
                        </template>
                    </div>
                    <el-image class="statusImg" :src="statusImg[item.isFirstSubmit ? 0 : item.lxsyzl]" fit="fill" />
                </div>
            </template>
        </el-card-collapse>
    </template>

    <template v-else>
        <div class="cardBox-no">
            <div class="cardBox-header flexR-SB-C">
                <div class="flexR-FS-C">
                    <el-image class="image" :src="imgIcon" fit="cover" />
                    <span>{{ title }}</span>
                </div>
                <el-image v-if="detailData.isEditable" class="icon" :src="addImg" fit="fill" @click.stop="handleAddContract({}, '1')" />
            </div>
        </div>
    </template>
    <add-contract ref="addContractRef" :title="title" @success="handleSuccess" />
</template>

<script setup>
import AddContract from './addContract.vue'
import mbStatu0 from '@/assets/images/contract/mbStatu0.png'
import mbStatu1 from '@/assets/images/contract/mbStatu1.png'
import mbStatu2 from '@/assets/images/contract/mbStatu2.png'
import mbStatu3 from '@/assets/images/contract/mbStatu3.png'
import mbStatu4 from '@/assets/images/contract/mbStatu4.png'
import addImg from '@/assets/images/contract/add.png'
import { cgxsOptions, lxStatusOptions } from '@/components/common'
import { formatDate } from '@/utils/time'
import commonData from '@/hooks/commonData'
import { add } from '@/utils/calculate'
import cardBoxData from './cardBoxData'

const { Plus, Aos, isPc } = commonData()

const emit = defineEmits(['success'])
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    imgIcon: {
        type: String,
        default() {
            return ''
        }
    },
    tableData: {
        type: Array,
        default() {
            return []
        }
    },
    refIndex: {
        type: Number,
        default() {
            return 0
        }
    },
    detailData: {
        type: Object,
        default: () => { }
    }
})

const { addContractRef, handleChangeCollapse, isTableShow, handleAddContract } = cardBoxData(props)
const dtlxTotal = ref(0)

const statusColor = {
    1: '#04B578',
    2: '#0170FE',
    3: '#CCCCCC'
}
const statusImg = {
    0: mbStatu0,
    1: mbStatu1,
    2: mbStatu2,
    3: mbStatu3,
    4: mbStatu4
}

watch(() => props.tableData, data => {
    if (data.length) {
        const list = []
        data.forEach(el => {
            list.push(el.dtjewy)
        })
        dtlxTotal.value = add.apply(null, list)
    }
}, {
    deep: true
})

function handleSuccess() {
    emit('success')
}
</script>

<style scoped lang='scss'>
@import "./style.scss";
.cardBox {
    width: 100%;
    margin-top: 10px;
    background-color: transparent;
    :deep(.el-card__header) {
        border: 0 none;
        background-color: #fff;
        padding: 10px;
    }
    :deep(.el-card__body) {
        padding: 0;
    }
    .card-item {
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        border-radius: 3px;
        position: relative;
        padding: 30px 14px 10px;
        transition: all 0.3s;
        .rowBox {
            width: 100%;
            margin-top: 10px;
            padding-bottom: 17px;
            margin-bottom: 17px;
            border-bottom: 1px dashed #979797;
            .title-span {
                width: 56px;
                font-size: 14px;
                color: rgb(0 0 0);
            }
            .value-span {
                font-size: 14px;
                color: #666;
            }
        }
        .statusImg {
            width: 60px;
            position: absolute;
            top: 0;
            right: 0;
        }
        .button {
            width: 89px;
            height: 30px;
            border-radius: 15px;
            font-size: 14px;
        }
        .button2 {
            border: 1px solid #666;
            color: #666;
        }
        .button3 {
            border: 1px solid #ff3141;
            color: #ff3141;
        }
    }
    .jiange {
        height: 8px;
    }
}
.cardBox-header {
    .anime-div {
        position: relative;
        .collapse-button {
            appearance: none;
            background: transparent;
            border-radius: 30px;
            border: 0;
            cursor: pointer;
            height: 30px;
            opacity: 0;
            outline: none;
            position: relative;
            width: 30px;
            z-index: 1;
            &::after {
                background: #efeff0;
                border-radius: 40px;
                content: "";
                height: 35px;
                left: 50%;
                opacity: 0;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.2s ease-out;
                width: 35px;
            }
            &:hover::after {
                opacity: 1;
            }
            svg {
                color: #9c9c9e;
                left: 50%;
                position: absolute;
                stroke-width: 3;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
            }
        }
        .image {
            width: 32px;
            position: absolute;
        }
    }
    span {
        font-size: 16px;
        color: rgb(0 0 0 / 90%);
    }
    .button {
        color: #fff;
        padding: 0;
        border: 0 none;
    }
    .button1 {
        background: #04b578;
    }
    .total {
        font-size: 16px;
        color: rgb(0 0 0 / 94%);
        span {
            font-size: 18px;
        }
    }
    .arrowIcon {
        margin-left: 10px;
        margin-top: 10px;
        transition: transform 0.3s;
        transform: rotate(90deg);
    }
    .rotateZ {
        transform: rotate(90deg);
    }
    .rotateZ2 {
        transform: rotate(-90deg);
    }
    .folder-collapse-button {
        appearance: none;
        background: transparent;
        border-radius: 30px;
        border: 0;
        cursor: pointer;
        height: 30px;
        opacity: 0;
        outline: none;
        position: absolute;
        position: relative;
        width: 30px;
        z-index: 1;
        &::after {
            background: #efeff0;
            border-radius: 40px;
            content: "";
            height: 35px;
            left: 50%;
            opacity: 0;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.2s ease-out;
            width: 35px;
        }
        &:hover::after {
            opacity: 1;
        }
        svg {
            color: #9c9c9e;
            left: 50%;
            position: absolute;
            stroke-width: 3;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }
    }
}
.cardBox-no {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: rgb(217 217 217) 0 18px 50px 0;
    margin-top: 18px;
    margin-right: 18px;
    .image {
        width: 50px;
        margin-right: 10px;
    }
}
.icon {
    width: 23px;
    margin-right: 10px;
}
</style>
